﻿@{
    ViewBag.Title = "Reports";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p,
    .bootstrap-iso form {
        font-family: Arial, Helvetica, sans-serif;
        color: black;
    }

        .bootstrap-iso form button,
        .bootstrap-iso form button:hover {
            color: white !important;
        }

    .asteriskField {
        color: red;
    }
</style>

<!-- Include Date Range Picker -->
<link href="~/Content/CSS/bootstrap-datepicker3.css" rel="stylesheet" />
<script src="~/Content/JS/bootstrap-datepicker.min.js"></script>
<ul class="nav nav-tabs">
    <li><a href="#Run" data-toggle="tab">Run </a></li>
    <li><a href="#Schedule" data-toggle="tab">Schedule </a></li>
    <li><a href="#Managment" data-toggle="tab">Management </a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="Run">
        <!-- HTML Form (wrapped in a .bootstrap-iso div) -->
        <div class="bootstrap-iso">
            <div class="container-fluid" style="margin-left: 400px;">
                <div class="row">
                    <label class="control-label col-sm-2 requiredField" for="fromDate">
                        From Date:     
                    </label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input class="form-control dateDiff" id="fromDate" name="fromDate" placeholder="MM/DD/YYYY" type="text"
                                style="width: 20%" />
                            <input type="time" name="usr_time" value="00:00:00" id="fromTime" style="height: 34px; width: 116px;">
                        </div>
                    </div>
                </div>
                 <div class="row">
                    <label class="control-label col-sm-2 requiredField" for="toDate">
                        To Date:     
                    </label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input class="form-control dateDiff" id="toDate" name="toDate" placeholder="MM/DD/YYYY" type="text"
                                style="width: 20%" />
                            <input type="time" name="usr_time" id="toTime" value="00:00:00" style="height: 34px; width: 116px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="menu" class="menu">
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Attendnce()">Attendnce</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Adit()">Adit</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Cards()">Cards</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="CheckIn-CheckOut()">CheckIn-CheckOut</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="GamePlay()">Game Play</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Inventory()">Inventory</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Loyalty()">Loyalty</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Maintenance()">Maintenance</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Miscellaneous()">Miscellaneous</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Others()">Others</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Redemption()">Redemption</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="Transaction()">Transaction</button>
            <button class="btn btn-primary btn-md menuItems" role="button" onclick="All()">All</button>
        </div>
        <div class="reportsBoard">
            Content
        </div>
    </div>
    <div class="tab-pane" id="Schedule">Schedule</div>
    <div class="tab-pane" id="Managment">Managment</div>
</div>

<script>
    function Transaction() {
        $('.reportsBoard').load('/Transaction/index');
    }
    $(document).ready(function () {
        $('.reportsBoard').load('/Report/AllReports');

    })
    $(document).ready(function () {
        var fromDate_input = $('input[name="fromDate"]'); //our date input has the name "date"
        fromDate_input.datepicker({
            format: 'mm/dd/yyyy',
            todayHighlight: true,
            autoclose: true,
        })
        var toDate_input = $('input[name="toDate"]'); //our date input has the name "date"
        toDate_input.datepicker({
            format: 'mm/dd/yyyy',
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>
